<!-- <script lang="ts" name="index" setup>
import {
  getTableListData,
  addTableListData,
  updateTableLisData,
  detailTableLisData,
  deleteTableLisData
} from '@/api/home'
import { ProTableState } from '@/injectKey'
import {
  Plus,
  Delete,
  Upload,
  Download,
  View,
  Edit
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const proTableRef = ref()
const formItemRef = ref()

const columns = reactive<API.ColumnsType[]>([
  {
    title: '科目名称',
    dataIndex: 'accountName',
    key: 'accountName',
    showInSearch: true,
    fixed: 'left',
    valueType: 'select',
    options: [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      },
      {
        value: 'Option3',
        label: 'Option3'
      }
    ]
  },
  {
    title: '供应商档案',
    dataIndex: 'supplierFiles',
    key: 'supplierFiles',
    fixed: 'left',
    showInSearch: true
  },
  {
    title: '项目编号',
    dataIndex: 'projectNo',
    key: 'supplierFiles',
    fixed: 'left',
    showInSearch: true
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    fixed: 'left',
    showInSearch: true
  },
  {
    title: '凭证号',
    dataIndex: 'voucherNo',
    key: 'voucherNo',
    showInSearch: true
  },
  {
    title: '金额',
    dataIndex: 'money',
    key: 'money'
  },
  {
    title: '款项发生时间',
    dataIndex: 'payTime',
    key: 'payTime',
    showInSearch: true,
    isDaterange: true,
    valueType: 'daterange'
  },
  {
    title: '账龄',
    dataIndex: 'aging',
    key: 'aging'
  },
  {
    title: '账龄时间分段',
    dataIndex: 'agingTimeSegment',
    key: 'agingTimeSegment',
    showInSearch: true,
    valueType: 'select',
    options: [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      },
      {
        value: 'Option3',
        label: 'Option3'
      }
    ]
  },
  {
    title: '部门来源',
    dataIndex: 'deptSource',
    key: 'deptSource',
    showInSearch: true
  },
  {
    title: '单位来源',
    dataIndex: 'unitSource',
    key: 'unitSource',
    showInSearch: true
  },
  {
    title: '资金来源',
    dataIndex: 'fundSource',
    key: 'fundSource',
    showInSearch: true
  },
  {
    title: '单位地址',
    dataIndex: 'adress',
    key: 'adress'
  },
  {
    title: '是否发函',
    dataIndex: 'doesSend',
    key: 'doesSend'
  },
  {
    title: '是否回函',
    dataIndex: 'doesReply',
    key: 'doesReply'
  },
  {
    title: '金额是否一致',
    dataIndex: 'doesUnanimous',
    key: 'doesUnanimous'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    hideInForm: true,
    fixed: 'right',
    width: 200
  }
])

const readonly = ref<boolean>(false)
const isAdd = ref<boolean>(false)
const ids = ref<(string | number)[]>([])

const visibleDrawer = ref<boolean>(false)
let itemForm = ref<any>({})
columns
  .filter((col) => !col.hideInForm)
  .forEach((item) => {
    itemForm.value[item.dataIndex] = item.initValue ? item.initValue : ''
  })

provide(ProTableState, {
  columns,
  request: getTableListData,
  visibleDrawer,
  readonly,
  isAdd,
  itemForm
})

onMounted(() => {
  proTableRef.value.refresh()
})

const formItemDetail = async (id: string | number) => {
  const res = await detailTableLisData(id)
  if (res.code === 200) itemForm.value = res.data
}

const submitFormItem = async () => {
  console.log(itemForm.value)
  const params = { ...itemForm.value }
  try {
    let res
    switch (isAdd.value) {
      case true:
        res = await addTableListData(params)
        if (res.code === 200) ElMessage.success('新增成功！')
        break
      case false:
        res = await updateTableLisData(params)
        if (res.code === 200) ElMessage.success('新增成功！')
        break
    }
    closeDrawer()
    proTableRef.value.refresh()
  } catch (err) {
    // ElMessage.error('操作失败！')
    console.log(err)
  }
}

const openDrawer = async (params: {
  id?: string | number
  isRead?: boolean
  isNew?: boolean
}) => {
  const { id, isRead, isNew } = params

  if (id) {
    await formItemDetail(id)
  }

  readonly.value = isRead ? isRead : false
  isAdd.value = isNew ? isNew : false
  visibleDrawer.value = true
}

const closeDrawer = () => {
  visibleDrawer.value = false
  if (readonly.value) {
    readonly.value = false
  }
  if (isAdd.value) {
    isAdd.value = false
  }
  formItemRef.value.reset()
}

const handleDelete = async (ids: (string | number)[]) => {
  const res = await deleteTableLisData(ids)
  if (res.code === 200) ElMessage.success('删除成功！')
  proTableRef.value.refresh()
}

const openMsgBox = (ids: (string | number)[]) => {
  ElMessageBox.confirm('是否‘确认’删除所选数据?', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  })
    .then(async () => {
      await handleDelete(ids)
    })
    .catch((err) => {
      console.log(err)
    })
}
const importData = () => {
  console.log('importData')
}
const exportData = () => {
  console.log('exportData')
}
</script>

<template>
  <ProTable ref="proTableRef">
    <template #tableHeader>
      <el-button
        type="primary"
        :icon="Plus"
        @click="openDrawer({ isNew: true })"
        >新增</el-button
      >
      <el-button type="danger" :icon="Delete" @click="openMsgBox(ids)"
        >批量删除</el-button
      >
      <el-button type="primary" :icon="Upload" @click="importData"
        >导入</el-button
      >
      <el-button type="success" :icon="Download" @click="exportData"
        >导出</el-button
      >
    </template>

    <template #operation="scope">
      <el-button
        link
        type="primary"
        :icon="View"
        size="small"
        @click="openDrawer({ id: scope.row.id, isRead: true })"
        >查看</el-button
      >
      <el-button
        link
        type="primary"
        :icon="Edit"
        size="small"
        @click="openDrawer({ id: scope.row.id })"
        >编辑</el-button
      >
      <el-button
        link
        type="danger"
        :icon="Delete"
        size="small"
        @click="openMsgBox([scope.row.id])"
        >删除</el-button
      >
    </template>
  </ProTable>
  <FormItem ref="formItemRef" title="应付账款" @submit-form="submitFormItem" />
</template>

<style lang="less" scoped></style> -->
